<template>
    <view>
        <view class="dar" v-if="targetDate != ''">
            <JCalendar
                ref="JCalendar"
                :yearMonth="targetDate"
                :dataSource="signData"
                @dateChange="refeshSignData($event)"
                @clickChange="updateSign($event)"
                :isFullCalendar='true'
            >
            </JCalendar>
        </view>

        <view class="show" v-if='info.date'>
            <view class="s1">日期：{{ info.date }}</view>
            <view class="s2">
                <text>状态：</text>
                <text :class="`status status_` + info.status">{{ info.status_text }}</text>
                <text>可计入工资时长：</text>
                <text>{{ info.pay_num }}</text>
            </view>

            <view class="s3" v-if="info.pay_json">
                <view class="cc">
                    <view class="t1">应签到时间</view>
                    <view class="tt" v-for="(item,index) in info.pay_json" :key='index'>{{ item }}</view>
                </view>

                <view class="cc">
                    <view class="t1">实际签到记录</view>
                    <view class="tt" v-for="(item,index) in info.time" :key='index'>{{ item.value }}</view>
                </view>
            </view>

            <view class="s4" v-if='info.status == 2'>
                <u-button type="success" text="情况申述" shape='circle' color='#30D6C2' @click="show = true"></u-button>
            </view>
        </view>
        
        <u-popup :show="show" @close="close" mode='center' bgColor='transparent'>
            <view class="shensu">
                <view class="t1">情况申述</view>
                <view class="textarea">
                    <u--textarea v-model="desc"></u--textarea>
                </view>
                
                <view class="s4" v-if='info.status == 2'>
                    <u-button type="success" text="提交申述" shape='circle' color='#30D6C2' @click="onSetLog()"></u-button>
                </view>
                
            </view>
        </u-popup>
                
    </view>
</template>

<script>
    import JCalendar from '@/components/j-calendar.vue';
    export default {
        components: {
            JCalendar
        },
        data() {
            return {
                show: false,
                desc: '',
                targetDate: '',
                signData: [],
                inData: '',
                info: {}
            }
        },
        onLoad(options) {
            this.id = options.id;
            this.getDateList();
						console.log(options.id);
        },
        methods: {
            refeshSignData(e) {
                this.targetDate = e;
                this.getDateList();
            },
            updateSign(e) {
                console.log('updateSign', e)
                this.inData = e;
                this.getDateInfo();
            },
            getDateList() {
                let that = this
                that.$API.getDateList({
                    id: that.id,
                    date: that.targetDate
                }).then(res => {
                    that.signData = res.data.list;
                    that.targetDate = res.data.date;
                    that.inData = res.data.in_date;
                    that.getDateInfo();
                })
            },
            getDateInfo() {
                let that = this
                that.$API.getDateInfo({
                    id: that.id,
                    date: that.inData
                }).then(res => {
                    that.info = res.data
                    console.log(that.info)
                })
            },
            onSetLog() {
                let that = this
                if (this.desc == '') {
                    uni.showToast({
                    	title: '请添加内容',
                    	duration: 2000,
                        icon: 'none'
                        
                    });
                    return;
                }
                that.$API.setLog({
                    id: that.info.id,
                    desc: that.desc
                }).then(res => {
                   uni.showToast({
                        title: res.msg,
                        duration: 2000
                   });
                   this.show = false;
                })
            },
            close() {
                this.show = false
            }
        }
    }
</script>

<style lang="scss">
    page {background-color: #F3F4F6;}
.dar {
    width: 702rpx;
    margin: 28rpx auto;
    background-color: #ffffff;
    border-radius: 16rpx;
}
.show {
    width: 654rpx;
    min-height: 478rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 24rpx auto;
    padding: 0 24rpx 28rpx 24rpx;
    .s1 {
        width: 654rpx;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
        color: #000000;
        font-weight: 500;
        border-bottom: 2rpx solid #ECECEC;
    }
    .s2 {
        height: 50rpx;
        line-height: 50rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 28rpx;
        color: #606266;
        margin: 32rpx auto;
        .status {
            width: 156rpx;
            &.status_1 {
                color: #3DE4DA;
            }
            &.status_2,&.status_0 {
                color: #E4473D;
            }
            &.status_3 {
                color: #3632F5;
            }
        }
    }
    .s3 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .cc {
            width: 100%;
            font-size: 32rpx;
            line-height: 56rpx;
            display: flex;
            flex-direction: column;
            .t1 {
                font-weight: bold;
                margin-bottom: 12rpx;
            }
        }
    }
    .s4 {
        width: 264rpx;
        height: 80rpx;
        margin: 76rpx auto 38rpx auto;
    }
}
.shensu {
    width: 622rpx;
    height: 548rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    .t1 {
        width: 100%;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 32rpx;
        text-align: center;
        margin-top: 50rpx;
    }
    .textarea {
        width: 554rpx;
        height: 218rpx;
        margin: 36rpx auto 58rpx auto;
        /deep/ .u-textarea {
            width: 524rpx;
            height: 188rpx;
            padding: 15rpx;
        }
    }
    .s4 {
        width: 264rpx;
        height: 80rpx;
        background: #30D6C2;
        border-radius: 40rpx;
        margin: 0 auto;
    }
}
</style>
